<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>

<script type="text/javascript" src="jquery-1.4.2.js">//</script>
<script type="text/javascript" src="jquery-ui-1.8rc3.custom.min.js">//</script>
<script type="text/javascript" src="jquery.flash.js">//</script>
<script type="text/javascript" src="jquery.webcam.js">//</script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#camera").webcam({
            width: 320,
            height: 240,
            mode: "callback",
            swffile: "jscam_canvas_only.swf",
            onTick: function () { },
            onSave: function () { },
            onCapture: function () { },
            debug: function () { },
            onLoad: function () { }
        });
    });
</script>
<style type="text/css">

#webcam, #canvas {
	width: 320px;
	border:20px solid #333;
	background:#eee;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}

#webcam {
	position:relative;
	margin-top:50px;
	margin-bottom:50px;
}

#webcam > span {
	z-index:2;
	position:absolute;
	color:#eee;
	font-size:10px;
	bottom: -16px;
	left:152px;
}

#webcam > img {
	z-index:1;
	position:absolute;
	border:0px none;
	padding:0px;
	bottom:-40px;
	left:89px;
}

#webcam > div {
	border:5px solid #333;
	position:absolute;
	right:-90px;
	padding:5px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	cursor:pointer;
}

#webcam a {
	background:#fff;
	font-weight:bold;
}

#webcam a > img {
	border:0px none;
}

#canvas {
	border:20px solid #ccc;
	background:#eee;
}

#flash {
	position:absolute;
	top:0px;
	left:0px;
	z-index:5000;
	width:100%;
	height:500px;
	background-color:#c00;
	display:none;
}

object {
	display:block; /* HTML5 fix */
	position:relative;
	z-index:1000;
}

</style>

  <title>CAPTURE</title>

  </head>

  <body >

    <div id="webcam">			
</div>

<p style="width:360px;text-align:center;font-size:12px"><a href="javascript:webcam.capture(3);changeFilter();void(0);">Take a picture after 3 seconds</a> | <a href="javascript:webcam.capture();changeFilter();void(0);">Take a picture instantly</a></p>

<p><canvas id="canvas" height="240" width="320"></canvas></p>

    
  </body>
</html>
